<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        td {
            width: 320px;
            height: 280px;
        }

        h3, p {
            text-shadow: rgba(0, 0, 0, 0.24) 4px 8px 8px;
        }

        .item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-content: center;
            text-align: center;
            color: white;
        }

        #northwest {
            background: dimgrey;
        }

        #north {
            background: blue;
        }

        #northeast {
            background: #c7c700;
        }

        #west {
            background: darkgoldenrod;
        }

        #center {
            background: purple;
        }

        #east {
            background: dodgerblue;
        }

        #southwest {
            background: brown;
        }

        #south {
            background: darkorange;
        }

        #southeast {
            background: green;
        }
    </style>
</head>
<body>
<div id="root">
    <table>
        <tr>
            <td id="northwest">
                <div class="item">
                    <h3>Northwest</h3>
                    <p>Metal</p>
                    <p>Silver</p>
                    <p>Elders</p>
                </div>
            </td>
            <td id="north">
                <div class="item">
                    <h3>North</h3>
                    <p>Water</p>
                    <p>Blue</p>
                    <p>Change</p>
                </div>
            </td>
            <td id="northeast">
                <div class="item">
                    <h3>Northeast</h3>
                    <p>Earth</p>
                    <p>Yellow</p>
                    <p>Direction</p>
                </div>
            </td>
        </tr>
        <tr>
            <td id="west">
                <div class="item">
                    <h3>West</h3>
                    <p>Metal</p>
                    <p>Gold</p>
                    <p>Youth</p>
                </div>
            </td>
            <td id="center">
                <div class="item">
                    <h3>Center</h3>
                    <p>All</p>
                    <p>Purple</p>
                    <p>Harmony</p>
                </div>
            </td>
            <td id="east">
                <div class="item">
                    <h3>East</h3>
                    <p>Wood</p>
                    <p>Blue</p>
                    <p>Future</p>
                </div>
            </td>
        </tr>
        <tr>
            <td id="southwest">
                <div class="item">
                    <h3>Southwest</h3>
                    <p>Earth</p>
                    <p>Brown</p>
                    <p>Tranquility</p>
                </div>
            </td>
            <td id="south">
                <div class="item">
                    <h3>South</h3>
                    <p>Fire</p>
                    <p>Orange</p>
                    <p>Fame</p>
                </div>
            </td>
            <td id="southeast">
                <div class="item">
                    <h3>Southeast</h3>
                    <p>Wood</p>
                    <p>Green</p>
                    <p>Romance</p>
                </div>
            </td>
        </tr>
    </table>
</div>
<script>
    let items = document.getElementsByTagName('td');
    for (let i of items) {
        i.addEventListener('click', highlight)
    }

    function highlight(e) {
        e.currentTarget.style.background = e.currentTarget.style.background === 'mediumvioletred' ? '' : 'mediumvioletred';
    }
</script>
</body>
</html>